<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距和内边距</title>
    <style type="text/css">
        div{
            border: dashed 2px red; /*边框的样式*/
            width: 500px; /*宽度*/

            /*margin-left: 100px; !*左外边距*!*/
            /*margin-top: 100px; !*上外边距*!*/

            margin: 30px; /*上 右 下 左 顺时针顺序*/
            margin: 30px 50px; /*上下 30px 左右50px*/

            padding: 30px; /*上 右 下 左 顺时针顺序 内边距*/
        }
    </style>
</head>
<body>
    <div><img src="images/cat.jpg" height="200"></div>
    <div><img src="images/cat.jpg" height="200"></div>
</body>
</html>